﻿<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html" doctype-system="http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd" doctype-public="-//W3C//DTD HTML 4.01//EN" indent="yes" />
  <xsl:template match="/">
    <html>
      <head>
        <title>jTreeView v 0.1</title>
        <script type="text/javascript" src="JS/jquery.js"></script>

        <script type="text/javascript" src="JS/jquery.jTreeView.js"></script>

        <script>
          var beginTime=new Date();
          var $Tree;
          $(document).ready(function(){

          var ProcessedTime3=new Date();
          
          $("#btnExpandALL").click(ExpandALL);
          
           $Tree = $("#NewTree").jTreeView({
          });
          //$("#NewTree").easydrag();

          function ExpandALL(){
          	alert("ExpandALL");
          	//通过模拟点击TreeView的根Employee实现全部选择？？？
          	//$Tree.checkNode($($($Tree.children("li")[0]).children("div.checkbox")[0]));
          	/*
          	$Tree.children("li").each(
          		function(){
          			if($.browser.msie){
          				$(this).children("div.checkbox")[0].click();
          			}
          			else
          			{
									var evt = document.createEvent("MouseEvents");
									evt.initEvent("click", true, true);
									$(this).children("div.checkbox")[0].dispatchEvent(evt);
          			}
          		}
          	);
          	*/
          }
          
          var ProcessedTime4=new Date();
          /*
          alert(ProcessedTime1 - beginTime);
          alert(ProcessedTime2 - beginTime);
          alert(ProcessedTime3 - beginTime);
          alert(ProcessedTime4 - beginTime);
          */
          });

          var ProcessedTime1=new Date();
          
          function btnCheckALL_click()
          {
          	var dtBegin=new Date();
          	//$Tree.checkAllNodes();
          	$Tree.children("li").each(
          		function()
          		{
          			$Tree.checkNode($(this));
          		}
          	)
          	alert(new Date()-dtBegin);
          }

          function btnUnCheckALL_click()
          {
          	var dtBegin=new Date();
          	$Tree.children("li").each(
          		function()
          		{
          			$Tree.uncheckNode($(this));
          		}
          	)
          	//$Tree.uncheckAllNodes();
          	alert(new Date()-dtBegin);
          }
          function btnAddNode_click()
          {
          	$Tree.addNode($($Tree.children("li")[0]),$($Tree.children("li")[1]).clone());
          }
          
          function btnRemoveNode_click()
          {
          	$Tree.deleteNode($($Tree.children("li")[0]));
          }
        </script>

        <link rel="stylesheet" type="text/css" href="CSS/jTreeView.css"/>
        <meta name="GENERATOR" content="MSHTML 8.00.6001.18928"/>
      </head>
      <body>
        <h1>
          jTreeView v 0.1
        </h1>
        <div style="border-bottom: #28f 1px solid; text-align: center; border-left: #28f 1px solid;
        padding-bottom: 15px; background-color: #def; margin: 0px auto; padding-left: 15px;
        width: 600px; padding-right: 15px; font-size: 20px; border-top: #28f 1px solid;
        font-weight: bold; border-right: #28f 1px solid; padding-top: 15px">
          jTreeView is on Google Code!
          <div style="margin-top: 10px; font-size: 15px; font-weight: normal">
            Visit the jTreeView GoogleCode project page: <a href="http://code.google.com/p/jquery-treeview/">
              http://code.google.com/p/jquery-treeview/
            </a>
          </div>
        </div>
        <h2>
          Demo
        </h2>
        <p>
          Here is a quick demo of the code which renders an unordered list and gives an example
          of how to format your hierarchy to be rendered appropriately by jTreeView.
        </p>
        <p>
        	<input type="button" value="Check All" id="btnCheckALL" onclick="btnCheckALL_click();"/>
        	<input type="button" value="UnCheck All" id="btnUnCheckALL" onclick="btnUnCheckALL_click();"/>
        	<input type="button" value="Add" id="btnCheckALL" onclick="btnAddNode_click();"/>
        	<input type="button" value="Remove" id="btnUnCheckALL" onclick="btnRemoveNode_click();"/>
        </p>
        <xsl:call-template name ="CreateTreeView">
          <xsl:with-param name ="TreeViewID">NewTree</xsl:with-param>
          <xsl:with-param name ="TreeView" select ="Employee"/>
        </xsl:call-template>

        <SCRIPT>
          var ProcessedTime2=new Date();
        </SCRIPT>

      </body>
    </html>
  </xsl:template>

  <xsl:template name ="CreateTreeView">
    <xsl:param name ="TreeViewID"/>
    <xsl:param name ="TreeView"/>
    <ul style="margin-left: 15px" class="tree">
      <xsl:attribute name ="id"><xsl:value-of select ="$TreeViewID"/></xsl:attribute>
          <xsl:call-template name ="CreateTreeNode">
            <xsl:with-param name ="CurrentTreeViewNode" select="$TreeView"/>
          </xsl:call-template>
    </ul>
  </xsl:template>

  <xsl:template name ="CreateTreeNode">
    <xsl:param name ="CurrentTreeViewNode"/>
    <li>
      <xsl:attribute name ="EmployeeID"><xsl:value-of select ="$CurrentTreeViewNode/@EmployeeID"/></xsl:attribute>
      <xsl:attribute name ="LoginName"><xsl:value-of select ="$CurrentTreeViewNode/@LoginName"/></xsl:attribute>
      <xsl:attribute name ="Title"><xsl:value-of select ="$CurrentTreeViewNode/@Title"/></xsl:attribute>
      <div class="arrow">
      <xsl:attribute name ="EmployeeID"><xsl:value-of select ="$CurrentTreeViewNode/@EmployeeID"/></xsl:attribute>
        <xsl:if test ="$CurrentTreeViewNode/Employee">
          <xsl:attribute name ="class">arrow collapsed</xsl:attribute>
        </xsl:if>
      </div>
      <div class="checkbox">
      	<xsl:choose>
			<xsl:when test="not($CurrentTreeViewNode/Employee) and $CurrentTreeViewNode/@Checked='True'">
				<xsl:attribute name="class">checkbox checked</xsl:attribute>
			</xsl:when>
      		<xsl:when test=".//*/@Checked='True'">
				<xsl:choose>
					<xsl:when test ="count(.//*[count(*)=0][@Checked='True'])=count(.//*[count(*)=0])">
						<xsl:attribute name="class">checkbox checked</xsl:attribute>
					</xsl:when>
					<xsl:otherwise>
						<xsl:attribute name="class">checkbox half_checked</xsl:attribute>
					</xsl:otherwise>
				</xsl:choose>
      		</xsl:when>
      		<xsl:otherwise/>
      	</xsl:choose>
      </div>
      <label>
        <xsl:value-of select ="$CurrentTreeViewNode/@LoginName"/>
      </label>
      <xsl:if test ="$CurrentTreeViewNode/Employee">
        <ul style="display: none">
          <xsl:for-each select="$CurrentTreeViewNode/Employee">
            <xsl:call-template name ="CreateTreeNode">
              <xsl:with-param name ="CurrentTreeViewNode" select ="."/>
            </xsl:call-template>
          </xsl:for-each>
        </ul>
      </xsl:if>
    </li>
  </xsl:template>

</xsl:stylesheet>